<template>
  <el-main>
    <!--面包屑 导航  提供了一种样式-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homepage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/homepage/vehicle'}">车辆管理</el-breadcrumb-item>

    </el-breadcrumb>

    <el-card class="box-card"><!--card 将信息聚合在卡片中展示-->
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="1.5">
          <el-dropdown @command="handleCommand"><!--Element-Ul ( Dropdow )下拉菜单组件command传输对象
          将动作或者菜单折叠到下拉菜单中-->

            <span class="el-dropdown-link">
    {{keykey}}<i class="el-icon-arrow-down el-icon--right"></i>
              <!--              选择,一个下拉菜单-->
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="id">车辆编号</el-dropdown-item>
              <el-dropdown-item command="name">车辆名称</el-dropdown-item>
              <el-dropdown-item command="vehicleCategory">车辆类型</el-dropdown-item>
              <el-dropdown-item command="buyDate">购买时间</el-dropdown-item>
              <el-dropdown-item command="status">车辆状态</el-dropdown-item>
              <el-dropdown-item command="rent">租金标准</el-dropdown-item>
              <el-dropdown-item command="licenseNumber">车牌号码</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
          <!-- 选择区域 -->
        </el-col>
        <el-col :span="7"><!--clearable可得到一个可清除的对话框-->
          <el-input placeholder="请输入内容" v-model="value"
                    class="input-with-select" clearable="" @clear="findlist(key,value)" ><!--删除内容-->
            <el-button slot="append" icon="el-icon-search" @click="findlist(key,value)"></el-button><!--点击搜索，插入想要搜索的类型以及内容-->
          </el-input>

        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加车辆信息</el-button><!-- 在后面实现具体的功能-->
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="searchlist" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="车辆编号" prop="id"></el-table-column>
        <el-table-column label="车辆名称" prop="name"></el-table-column>
        <el-table-column label="车辆类型" prop="vehicleCategory"></el-table-column>
        <el-table-column label="购买时间" prop="buyDate"></el-table-column>
        <el-table-column label="车辆状态" prop="status"></el-table-column>
        <el-table-column label="租金标准" prop="rent"></el-table-column>
        <el-table-column label="车牌号码" prop="licenseNumber"></el-table-column>
        <el-table-column label="操作" fixed="right" width="150px">
          <!-- slot-scope用来获取当前表格的数据对象
               用scope.row可以获取当前列的数据 -->
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="修改" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="changeFormBind(scope.row)"></el-button>
              <!--点击修改时，将这条记录原有的数据显示在要修改的地方 -->
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteForm(scope.row.id)"></el-button>
              <!-- 删除这条数据-->
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码显示 -->
      <div class="block">
        <el-pagination><!--分页组件-->
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.pagenum"
          :page-size="queryInfo.pagesize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 添加信息区域 -->
    <el-dialog
      title="添加车辆信息"
      :visible.sync="addDialogVisible"
      width="60%" @close="addDialogClosed">
      <!-- 主体区域 -->
      <el-form :model="addVehicle" :rules="addVehicleRules" ref="addVehicleRef" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="车辆名称" prop="name">
          <el-input v-model="addVehicle.name"></el-input>
        </el-form-item>
        <el-row :gutter="50">
          <el-col :span="7">
            <el-form-item label="车辆类别" prop="vehicleCategory">
              <el-select v-model="addVehicle.vehicleCategory" placeholder="请选择车辆类别">
                <el-option label="乘用车" value="乘用车"></el-option>
                <el-option label="客车" value="客车"></el-option>
                <el-option label="货车" value="货车"></el-option>
                <el-option label="牵引车" value="牵引车"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="385">
          <el-col :span="4">
            <el-form-item label="购买日期" prop="buyDate">
              <el-date-picker
                v-model="addVehicle.buyDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="7">
            <el-form-item label="车辆状态" prop="status">
              <el-radio-group v-model="addVehicle.status">
                <el-radio label="已出租">已出租</el-radio>
                <el-radio label="未出租">未出租</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="租金标准" prop="rent">
          <el-input v-model="addVehicle.rent" placeholder="单位：元"></el-input>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licenseNumber">
          <el-input v-model="addVehicle.licenseNumber"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForm">确 定</el-button>
  </span>
    </el-dialog>

    <!-- 修改信息区域 -->
    <el-dialog
      title="修改车辆信息"
      :visible.sync="changeDialogVisible"
      width="30%">
      <!-- 主体区域 -->
      <el-form :model="changeVehicle" :rules="addVehicleRules" ref="deleteVehicleRef" label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="车辆编号" prop="id">
          <el-input v-model="changeVehicle.id" :disabled="true"></el-input>
        </el-form-item>
          <el-form-item label="车辆名称" prop="name">
            <el-input v-model="changeVehicle.name"></el-input>
          </el-form-item>
        <el-row :gutter="50">
          <el-col :span="14">
            <el-form-item label="车辆类别" prop="vehicleCategory">
              <el-select v-model="addVehicle.vehicleCategory" placeholder="请选择车辆类别">
                <el-option label="乘用车" value="乘用车"></el-option>
                <el-option label="客车" value="客车"></el-option>
                <el-option label="货车" value="货车"></el-option>
                <el-option label="牵引车" value="牵引车"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
          <el-form-item label="购买时间" prop="buyDate">
            <el-input v-model="changeVehicle.buyDate"></el-input>
          </el-form-item>
        <el-row :gutter="50">
          <el-col :span="13">
            <el-form-item label="车辆状态" prop="status">
              <el-radio-group v-model="changeVehicle.status">
                <el-radio label="已出租">已出租</el-radio>
                <el-radio label="未出租">未出租</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
          <el-form-item label="租金标准" prop="rent">
            <el-input v-model="changeVehicle.rent" ></el-input>
          </el-form-item>
          <el-form-item label="车牌号码" prop="licenseNumber">
            <el-input v-model="changeVehicle.licenseNumber"></el-input>
          </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="changeDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeForm">确 定</el-button>
  </span>
    </el-dialog>
  </el-main>


</template>


<script>

  export default {
    name: 'vehicle',
    data() {
      //数字合法验证
      var checkNumber = (rule, value, callback) => {
        const regNumber = /^(0|[1-9]\d*)$/
        //验证成功
        if (regNumber.test(value)) {
          return callback();
        } else {
          callback(new Error('请输入合法的数字'));
        }
      }
      return {
        //获取设备类别信息的参数对象
        queryInfo: {
          query: '', //搜索关键字
          pagenum: 1, //页数
          pagesize: 100, //条数
        },

        vehiclelist: [],  //初始列表数据
        searchlist: [], //查询列表数据


        addVehicle: {          //添加类别数据
          name: '',
          vehicleCategory:'',
          buyDate:'',
          status:'',
          rent:'',
          licenseNumber:''
        },

        changeVehicle: {
          id: 0,
          name: '',
          vehicleCategory:'',
          buyDate:'',
          status:'',
          rent:'',
          licenseNumber:''
        },

        addVehicleRules: {  //添加表单验证规则
          name: [
            {required: true, message: '请输入车辆名称', trigger: 'blur'}
          ],
          vehicleCategory: [
            {required: true, message: '请输入车辆类别', trigger: 'blur'}
          ],
          buyDate: [
            {required: true, message: '请输入购买时间', trigger: 'blur'}
          ],
          status: [
            {required: true, message: '请输入车辆状态', trigger: 'blur'}
          ],
          licenseNumber: [
            {required: true, message: '请输入车牌号码', trigger: 'blur'}
          ],
          rent: [
            {required: true, message: '请输入租金标准', trigger: 'blur'},
            {validator: checkNumber, trigger: 'blur'}]

        },

        keykey: '选择',
        total: 0, //总数
        key: '',  //搜索类别
        value: '',  //搜索值
        alltotal: 0,  //搜索数据总数
        addDialogVisible: false,  //控制--添加--对话框的显示和隐藏
        changeDialogVisible: false //控制--修改--对话框的显示和隐藏


      }
    },
    created() {
      this.getUserList();
      this.$message({
        message: '获取成功',
        type: 'success'
      });
    },
    methods: {
      // 初始化界面
      getUserList: function () {
        this.$axios.get('/api/vehicle/list').then(res => {
          this.vehiclelist = res.data;
          this.alltotal = res.data.length;
          this.searchlist = this.vehiclelist;
          this.total = this.alltotal;
        }).catch(err => {
          console.log(err);
        })
      },

      //按规定key和value查找
      findlist: function (key, value) {
        if (value == '') {
          this.searchlist = this.vehiclelist;
          this.total = this.alltotal;
          this.keykey = '选择';
        } else {
          this.$axios.get('/api/vehicle/search', {
            params: {
              key: key,
              value: value
            }
          }).then(res => {
              this.searchlist = res.data;
              this.total = res.data.length;
              console.log(res.data);
            }
          ).catch(err => {
            console.log(err);
          })
        }

      },


      handleSizeChange: function (newSize) {
        console.log(newSize);
      },
      handleCurrentChange: function (newPage) {
        console.log(newPage);
      },
      // 绑定key
      handleCommand: function (command) {
        this.key = command;
        switch (command) {
          case 'id':
            this.keykey = '车辆编号';
            break;
          case 'name':
            this.keykey = '车辆名称';
            break;
          case 'vehicleCategory':
            this.keykey = '车辆类别';
            break;
          case 'buyDate':
            this.keykey = '购买时间';
            break;
          case 'status':
            this.keykey = '车辆状态';
            break;
          case 'rent':
            this.keykey = '租金标准';
            break;
          case 'licenseNumber':
            this.keykey = '车牌号码';
            break;
        }

      },
      //关闭对话框重置信息
      addDialogClosed: function () {
        this.$refs.addVehicleRef.resetFields();

      },


      //校验输入内容合法
      //添加vehicle
      addForm: function () {
        this.$refs.addVehicleRef.validate(valid => {
          console.log(valid);
          if (!valid) return;
          let addVehicle = this.addVehicle;
          this.$axios.get('/api/vehicle/repeat', {
            params: {
              name: addVehicle.name
            }
          }).then(res => {
            if (res.data == false) {
              this.$axios.post('/api/vehicle/save', addVehicle
              ).then(res => {

                console.log(res);
                this.$message.success('添加车辆信息成功');
                this.addDialogVisible = false;
                this.getUserList();
              }).catch(err => {
                console.log(err);
              })
            } else {
              this.$message.error('该车俩信息已经被添加');
            }
          }).catch(err => {
            console.log(err);
          })


        })
      },

      //删除列表
      deleteForm: function (res) {

        console.log(res);
        this.$confirm('此操作将永久删除该车辆信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get('/api/vehicle/delete', {
            params: {
              id: res
            }
          }).then(res => {
            this.$message.success('删除车辆信息成功');
            this.getUserList();
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
        })
      },

      //修改列表
      changeForm: function () {
        this.$refs.deleteVehicleRef.validate(valid => {
          console.log(valid);
          if (!valid) return;
          let changeVehicle = this.changeVehicle;
          this.$axios.get('/api/Vehicle/changeRepeat', {
            params: {
              id: changeVehicle.id,
              name: changeVehicle.name
            }
          }).then(res => {
            if (res.data == false) {
              this.$axios.post('/api/vehicle/update', changeVehicle
              ).then(res => {

                console.log(res);
                this.$message.success('修改车辆信息成功');
                this.changeDialogVisible = false;
                this.getUserList();
              }).catch(err => {
                console.log(err);
              })
            } else {
              this.$message.error('该车辆信息已经被添加');
            }
          }).catch(err => {
            console.log(err);
          })

        })
      },

      //渲染修改列表基础值
      changeFormBind: function (res) {
        this.changeVehicle = res;
        console.log(this.changeVehicle);
        this.changeDialogVisible = true;
        this.getUserList();
      }
    }
  }

</script>
<style lang="less">
  .el-aside {
    color: #333;
    height: 600px;
  }

  .el-breadcrumb {
    margin-bottom: 15px;
    font-size: 12px;
  }

  .el-table {
    margin-top: 15px; //表格与搜索框边距
    font-size: 15px;
  }

  .el-pagination {
    margin-top: 15px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;


  }

  .el-icon-arrow-down {
    font-size: 12px;
    margin-top: 12px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
